<template>
	<view class="student-id-content">
		<view class="student-id-title">
			<span v-if="userType==='0'">绑定学号</span>
			<span v-else>绑定工号</span>
		</view>
		<view class="student-id">
			<u-input v-if="userType==='0'" placeholder="填写学号" v-model="numberId" clearable type="number" style="height:90rpx">
			</u-input>
			<u-input v-else placeholder="填写工号" v-model="numberId" clearable type="number" style="height:90rpx">
			</u-input>
		</view>
		<view class="login-row">
			<u-button type="default" shape="circl`e" text="登录" class="login-btn" @tap="userIndent" hover-class="none">
				下一步</u-button>
		</view>
		<view class="prompt">
			<span>首次创建需要填写
			    <span v-if="userType==='0'">学号</span>
	    		<span v-else>工号</span>
			</span>
		</view>
	</view>
</template>

<script>
	import { API } from '../../config/myApi.js';
	export default {
		data() {
			return {
				numberId: '',
				userType: '',
			}
		},
		onLoad() {
			this.userType = uni.getStorageSync('userType');
			console.log('typeeee',this.userType);
		},
		methods: {
			// 用户类型验证
			userIndent() {
				let tips = '';
				this.userType === '0' ? tips = '工号' : tips = '学号';
				const pram = {
					number: this.numberId,
					userType: this.userType
				}
				uni.setStorageSync('number',this.numberId);
				console.log('fddddff', this.numberId)
				if(!this.numberId) {
					this.$u.toast(`${tips}不能为空`)
				}else {
					API.isExists(pram).then( res=>{
						if(res.code==200) {
							this.next();
						}else {
							setTimeout(()=> {
								this.$u.toast(`${tips}错误`)
							},3000)
						}
					})
				}
			},
			//登录
			next(){
				uni.navigateTo({
					url:'/pages/person/personalInformation'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.student-id-content {
		min-height: calc(100vh - 88rpx);
		background-color: #fff;
		padding: 0rpx 50rpx;
		overflow: hidden;

		.student-id-title {
			font-size: 46rpx;
			font-weight: bold;
			color: #333333;
			margin-top: 86rpx;
			text-align: center;
		}

		.student-id {
			border-bottom: 1rpx solid #E3E3E3;
			margin-top: 180rpx;
		}

		.login-row {
			margin-top: 60rpx;

			.login-btn {
				background-color: #F4333C;
				color: #fff;
				height: 90rpx;
			}

			.u-hairline-border:after {
				border: none;
			}
		}

		.prompt {
			width: 100%;
			font-size: 22rpx;
			color: #666666;
			text-align: center;
			position: absolute;
			left: 0rpx;
			bottom: 82rpx;
		}
	}
</style>
